<template>
  <div class="analysis-page">
    <!-- 数据接入页面 -->
    <div class="header">
      <h1>数据可视化大屏展示</h1>
      <div class="showTime" />
    </div>
    <!-- 主体 -->
    <div class="main-box">
      <div class="column">
        <!-- 柱状图 -->
        <div class="panel-page bar">
          <h2>行业分布</h2>
          <div class="chart">
            <bar-echart />
          </div>
          <div class="panel-footer" />
        </div>
        <!-- 折线图 -->
        <div class="panel-page bar">
          <h2>行业指标</h2>
          <div class="chart">
            <line-echart />
          </div>
          <div class="panel-footer" />
        </div>
        <!-- 饼形图 -->
        <div class="panel-page bar">
          <h2>地区分布</h2>
          <div class="chart">
            <pie-echart />
          </div>
          <div class="panel-footer" />
        </div>
      </div>
      <div class="column">
        <!-- no模块 -->
        <div class="no">
          <div class="no-hd">
            <ul>
              <li class="li">61920</li>
              <li>268212</li>
            </ul>
          </div>
          <div class="no-bd">
            <ul>
              <li>行业指标</li>
              <li>行业分析</li>
            </ul>
          </div>
        </div>
        <!-- map模块 -->
        <div class="map">
          <div class="map1" />
          <div class="map2" />
          <div class="map3" />
          <div class="chart">
            <my-map />
          </div>
        </div>
      </div>
      <div class="column">
        <!-- 柱状图 -->
        <div class="panel-page bar">
          <h2>人口统计</h2>
          <div class="chart">
            <bar2 />
          </div>
          <div class="panel-footer" />
        </div>
        <!-- 折线图 -->
        <div class="panel-page bar">
          <h2>折线图</h2>
          <div class="chart">
            <line2 />
          </div>
          <div class="panel-footer" />
        </div>
        <!-- 饼形图 -->
        <div class="panel-page bar">
          <h2>行业分布</h2>
          <div class="chart">
            <pie2 />
          </div>
          <div class="panel-footer" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
var t = null
t = setTimeout(time, 1000) // 開始运行
function time() {
  clearTimeout(t) // 清除定时器
  var dt = new Date()
  var y = dt.getFullYear()
  var mt = dt.getMonth() + 1
  var day = dt.getDate()
  var h = dt.getHours() // 获取时
  var m = dt.getMinutes() // 获取分
  var s = dt.getSeconds() // 获取秒
  document.querySelector('.showTime').innerHTML =
    '当前时间：' + y + '年' + mt + '月' + day + '-' + h + '时' + m + '分' + s + '秒'
  t = setTimeout(time, 1000) // 设定定时器，循环运行
}
import barEchart from './components/barEchart.vue'
import lineEchart from './components/lineEchart.vue'
import pieEchart from './components/pieEchart.vue'
import pie2 from './components/pie2.vue'
import line2 from './components/line2.vue'
import bar2 from './components/bar2.vue'
import myMap from '../../components/map/myMap.vue'
export default {
  name: 'AnalysisPage',
  components: {
    barEchart,
    lineEchart,
    pieEchart,
    pie2,
    line2,
    bar2,
    myMap
  },
  data() {
    return {
      nowTime: ''
    }
  },

  mounted() {},

  methods: {}
}
</script>

<style lang="scss" scoped>
@import './analysisPage.scss';
</style>
